<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5简历</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/animate.min.css ">

</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- 第一页 -->
            <div class="swiper-slide">
                <div class="_01-bg ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
                    swiper-animate-delay="0.3s"></div>
                <div class="_01-title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                    swiper-animate-delay="1s">
                    <p class="ani" swiper-animate-effect="slideInleft" swiper-animate-duration="2s"
                        swiper-animate-delay="1s">RESUME</p>
                </div>
                <div class="_01-circle"></div>
                <div class="_01-words ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                    swiper-animate-delay="1s">
                    <h2 class="name">赵 龙</h2>
                    <p class="job">前端工程师</p>
                    <p class="adr">[中国 成都]</p>
                </div>
            </div>
            <!-- 第二页 -->
            <div class="swiper-slide">
                <div class="_02-bg ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"></div>
                <div class="_02-title">
                    <p class="n1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">个人信息</p>
                    <p class="n2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"
                        swiper-animate-delay="1s"></p>
                    <p class="n3 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1.5s">Personal information</p>
                </div>
                <div class="_02-pic ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s"
                    swiper-animate-delay="1s"></div>
                <div class="_02-name">
                    <p class="n1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">姓名：赵龙</p>
                    <p class="n2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                        swiper-animate-delay="1.2s">岗位：前端工程师</p>
                    <p class="n3 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                        swiper-animate-delay="1.4s">出生年月：1995.03</p>
                    <p class="n4 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                        swiper-animate-delay="1.6s">毕业学校：四川理工学院</p>
                </div>
                <div class="_02-list"></div>
            </div>
            <!-- 第三页 -->
            <div class="swiper-slide">
                <div class="_03-bg ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"></div>
                <div class="_03-title">
                    <p class="n1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">自我介绍</p>
                    <p class="n2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"
                        swiper-animate-delay="1s"></p>
                    <p class="n3 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1.5s">Introduce</p>
                </div>
                <div class="_03-content ani">
                    <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
                        swiper-animate-delay="1s">◎ 本人性格比较温和、谦虚、认真细致、踏实、吃苦耐劳、有较强的责任心和社会适应能力</p>
                    <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
                        swiper-animate-delay="1.5s">◎ 在大学四年的学习生活中，我对前端这一领域的相关知识有了一定的掌握，同时具有实际的操作能力</p>
                </div>
            </div>
            <!-- 第四页 -->
            <div class="swiper-slide">
                <div class="_04-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"></div>
                <div class="_04-title">
                    <p class="n1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">专业技能</p>
                    <p class="n2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s"
                        swiper-animate-delay="1s"></p>
                    <p class="n3 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
                        swiper-animate-delay="1.5s">Specialized skill​</p>
                    <div class="list ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                        swiper-animate-delay="1s">
                        <p>2014~2018</p>
                        <p>毕业院校：四川理工学院</p>
                        <p>学历：本科</p>
                    </div>
                </div>
                <div class="_04-box ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"
                    swiper-animate-delay="0.5s"></div>
                <div class="_04-content ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
                    swiper-animate-delay="1s">
                    <p>◎ 主修课程：电子商务，网络营销基础与实践、电子商务与国际贸易、营销策划、网页配色、网页设计、Web标准与网站重构等。</p>
                    <p>◎ 技能：HTML CSS JavaScript 以及各种主流框架...</p>
                </div>
            </div>
            <!-- 第五页 -->
            <div class="swiper-slide">
                <div class="_04-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"></div>
                <div class="_04-title">
                    <p class="n1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">项目经历</p>
                    <p class="n2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s"
                        swiper-animate-delay="1s"></p>
                    <p class="n4 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
                        swiper-animate-delay="1.5s">Project experience</p>
                </div>
                <div class="_05-content">
                    <p class="n1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                        swiper-animate-delay="1s"></p>
                    <p class="n2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                        swiper-animate-delay="1s">家居网</p>
                    <p class="n3 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
                        swiper-animate-delay="1s">◎ 家居网是一个用来推广企业自身产品的网站，在这个网站里，
                        主要有首页、关于我们、产品展示、新闻动态、在线留言、联系我们等几大模块。
                    </p>
                </div>             
            </div>
            <!-- 第六页 -->
            <div class="swiper-slide">
                <div class="_04-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"></div>
                <div class="_04-title">
                    <p class="n1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">项目经历</p>
                    <p class="n2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s"
                        swiper-animate-delay="1s"></p>
                    <p class="n4 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
                        swiper-animate-delay="1.5s">Project experience</p>
                </div>
                <div class="_05-content">
                    <p class="n11 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                        swiper-animate-delay="1s"></p>
                    <p class="n2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                        swiper-animate-delay="1s">乐购商城</p>
                    <p class="n3 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
                        swiper-animate-delay="1s">◎ 乐购商城是一个基于PC端的B2C平台的电商网站，
                        具体页面包括商城首页、商品列表页、商品详情页、购物车页面、结算中心页、支付页面、注册页面、登录页面以及商城后台管理页面
                    </p>
                </div>
                
            </div>
            <!-- 第七页 -->
            <div class="swiper-slide">
                <div class="_02-bg ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"></div>
                <div class="_06-title">
                    <p class="n1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">联系方式</p>
                    <p class="n2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"
                        swiper-animate-delay="1s"></p>
                    <p class="n3 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1.5s">Contact</p>
                </div>
                <div class="_06-pic ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                    swiper-animate-delay="1s"></div>
                <p class="_06-wechat ani" swiper-animate-effect="rollIn" swiper-animate-duration="1.2s"
                    swiper-animate-delay="1s">可添加个人微信</p>
                <div class="_06-tel ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.6s"
                    swiper-animate-delay="1s">
                    <p class="n1">15892201622</p>
                </div>
                <div class="_06-email ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.6s"
                    swiper-animate-delay="1s">
                    <p class="n1">naokimidori@163.com</p>
                </div>
                <div class="_06-words">
                    <p class="n1 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
                        swiper-animate-delay="1s">谢谢观看！</p>
                    <p class="n2 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
                        swiper-animate-delay="2s">期待加入贵公司团队一起共创辉煌</p>
                </div>
            </div>
        </div>
        <div class="nextBtn">
            <img src="./img/up_guid.gif" alt="">
        </div>
        <div id="musicDiv" class="musicPlay"></div>
    </div>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/swiper.animate1.0.3.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'vertical', // 垂直切换选项
            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素 
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    // this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展现一次，去除ani类名
                }
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.nextBtn'
            }
        });

        //bgm播放控件 
        var audio = document.createElement("audio");
        audio.src = "./music/bgm.mp3";   
        audio.id="audio";
        audio.load();
        audio.play();

        var musicBtn = document.querySelector("#musicDiv");
        //点击
        musicBtn.onclick = function () {
            if (musicBtn.className == "musicPlay") {
                //暂停
                musicBtn.className = "";
                audio.pause();
            } else {
                //播放
                musicBtn.className = "musicPlay";
                audio.play();
            }
        }

    </script>
</body>

</html>